<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="stage">
      <h5>Movies</h5>
      <h3>Popular</h3>
      <!-- section 就是div -->
      <section class="list">
        <div class="card">
          <img src="./3dr_mono.png" alt="" />
        </div>
        <div class="card">
          <img src="./3dr_chihiro.png" alt="" />
        </div>
        <div class="card">
          <img src="./3dr_howlcastle.png" alt="" />
        </div>
      </section>
    </div>

    <script>
      let o;
      let getSize = function () {
        o = {
          x: window.innerWidth / 2,
          y: window.innerHeight / 2,
        };
      };
      getSize();

      window.onresize = getSize;

      let stage = document.querySelector(".stage");
      let cards = stage.querySelectorAll(".list .card");
      let imgs = stage.querySelectorAll(".list .card img");
      document.body.addEventListener("mousemove", function (event) {
        let mp = {
          x: event.pageX,
          y: event.pageY,
        };
        let x = mp.x - o.x;
        let y = mp.y - o.y;
        // console.log(x);

        stage.style.transform = `rotateX(${(15 / o.y) * y}deg) rotateY(${(15 / o.x) * x}deg)`;
        imgs.forEach((e) => {
          e.style.transform = `translate(${(10 / o.x) * x}px, ${(10 / o.y) * y}px)`;
        });
        cards.forEach((card) => {
          card.style.backgroundPosition = `${(10 / o.x) * -x + -12}px  ${(10 / o.y) * -y + -10}px`;
        });
      });
    </script>
  </body>
</html>
